<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import {useToast} from 'wot-design-uni'
import { useCinemaStore } from '@/store/params'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const cinemaStore = useCinemaStore()
const { success: showSuccess, error: showError } = useToast()

// 定义响应式的导航栏标题
const navTitle = ref('优惠券')
const activeTab = ref()
const loading = ref(false)
const tabsList = [
  {
    id: 1,
    name: '商城'
  },
  {
    id: 2,
    name: '电影票'
  }
]

const couponList = ref([])

onLoad((options) => {
  navTitle.value = cinemaStore.cinemaInfo.cinemaName

})

const getCouponData = (status) => {
  loading.value = true
  const params = {
    couponName: '',
    pageNum: '',
    pageSize: ''
  }
  http.post('/movieSystem/coupon/getCouponList', params).then((res: any) => {
    if (res.success) {
        couponList.value = res.data.list
    } else {
        showError({
        msg: res.message
        })
    }
  }).finally(() => {
      loading.value = false
  })
    
  if (status === 1) {
    // 即将上映
  } else {
    // 正在上映
  }

}

const onChange = (event) => {
  getCouponData(event.index)
}

const onBuy = (status) => {
  if (status === 1) {
    // 想看
  } else {
    // 购买
    uni.navigateTo({
      url: '/pages-home/ticketPurchaseDetails'
    })

  }
}

const navBack = () => {
  uni.switchTab({
    url: '/pages/thirdTab'
  })
}

onMounted(() => {
    getCouponData()
})
</script>

<template>

  <PageLayout :navbarShow="true" navLeftText=""  @navBack="navBack"  :navLeftArrow="true" :navTitle="navTitle">
  <view loading class="my-6 mx-4">
    <view v-for="dataItem in couponList" :key="dataItem.id" class="mb-6">
        <view class="flex justify-between p-4" style="background-color:#FFBF6B;border-radius: 6px;">
            <view>
                <view class="title mb-1 size-big">{{ dataItem.couponName }}</view>
                <view class="info grey-mini">金额限定使用：¥ {{ dataItem.amountLimit }}</view>
            </view>
            <view>
                <view class="info mb-1 text-center size-big red">{{dataItem.preferential}} 元</view>
                <view class="info grey-mini">有效期：{{ dataItem.endDate }}</view>
            </view>
        </view>
    </view>
  </view>
  </PageLayout>
</template>

<style>
.grey-mini {
    color: #6C6C6C ;
    font-size: .8rem;
}
.size-big {
  font-size: 1.5rem;
}
.red {
  color: red;
}
</style>

<route type="page" lang="json5">
{
  "style": {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  }
}
</route>
